import React, { Component } from "react";
import SwipeableViews from "react-swipeable-views";
import { autoPlay } from "react-swipeable-views-utils";
import "./Swiper.less";
import Pagination from "./Pagination/Pagination";
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
class Swiper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
    };
  }
  handleChangeIndex = (index) => {
    this.setState({
      currentIndex: index,
    });
  };
  render() {
    console.log(this.props.banners);
    let banners = this.props.banners;
    return (
      <div className="swiper">
        <AutoPlaySwipeableViews
          enableMouseEvents
          index={this.state.currentIndex}
          onChangeIndex={this.handleChangeIndex}
        >
          {banners.map((item, index) => {
            return (
              <div className="swiper-view" key={item + index} style={{}}>
                <img src={item} alt="" />
              </div>
            );
          })}
        </AutoPlaySwipeableViews>
        <Pagination myindex={this.state.currentIndex} dots={banners.length} />
      </div>
    );
  }
}

export default Swiper;
